<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名精灵图网页</title>
    <style>
        /* 假设我们有一个精灵图，其背景位置设置如下 */
        .initial-sprite {
            display: inline-block;
            background-image: url("images/精灵图.png");
            /* 替换为你的精灵图实际路径 */
            background-repeat: no-repeat;
            background-color: transparent;
            width: 150px;
            /* 精灵图单个元素的宽度 */
            height: 160px;
            /* 精灵图单个元素的高度 */
        }

        /* 为不同姓名首字母设置不同的背景位置 */
        .initial-A {
            background-position: 50 50;
        }

        .initial-B {
            background-position: -50px 0;
        }

        /* 更多姓名首字母对应的位置... */

        /* 姓名展示部分 */
        .name-section {
            font-size: 24px;
            line-height: 1.5;
            text-align: center;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="name-section">
        <span class="initial-sprite initial-A">L</span>
        <span class="name-text">逯博</span>
    </div>

</body>

</html>